<template>
	<div class="review-qa-container">
		<!-- 评价与问答标签页 -->
		<div class="tab-container">
			<div class="tab-item" :class="{ active: activeTab === 'reviews' }" @click="switchTab('reviews')">
				评价 ({{ reviews.length }})
			</div>
			<div class="tab-item" :class="{ active: activeTab === 'qa' }" @click="switchTab('qa')">
				问答 ({{ questions.length }})
			</div>
		</div>

		<!-- 评价模块 -->
		<div v-if="activeTab === 'reviews'" class="content-container">
			<!-- 评价列表 -->
			<div class="review-list">
				<div class="review-item" v-for="(review, index) in reviews" :key="index">
					<!-- 用户信息 -->
					<div class="review-header">
						<div class="user-info">
							<div class="user-name">{{ review.user.name }}</div>
							<div class="review-date">{{ review.date }}</div>
						</div>
					</div>

					<!-- 评分 -->
					<div class="review-rating">
						<div class="stars">
							<span v-for="i in 5" :key="i" :class="{ filled: i <= review.rating }"
								@click="setRating(i)">★</span>
						</div>
						<span class="rating-text">
							{{ review.rating }} 分
						</span>
					</div>

					<!-- 评价内容 -->
					<div class="review-content">{{ review.content }}</div>

					<!-- 互动按钮 -->
					<div class="review-actions">
						<button class="action-btn" @click="toggleFavorite(review.id)">
							{{ review.isFavorited ? '已点赞' : '点赞' }}
						</button>
						<button class="action-btn" @click="showReplyForm(review.id)">
							回复
						</button>
					</div>

					<!-- 回复表单 -->
					<transition-group name="reply-form-fade" class="reply-form" tag="div"
						v-if="showingReplyForm[review.id]">
						<div key="reply-form" class="reply-form-inner">
							<textarea v-model="replyText[review.id]" placeholder="写下你的回复..." class="reply-textarea"
								@keydown.enter.prevent="submitReply(review.id)"></textarea>
							<div class="form-actions">
								<button class="btn-primary" @click="submitReply(review.id)">
									提交回复
								</button>
								<button class="btn-secondary" @click="hideReplyForm(review.id)">
									取消
								</button>
							</div>
						</div>
					</transition-group>

					<!-- 回复列表 -->
					<div class="replies" v-if="review.replies && review.replies.length > 0">
						<div class="reply-item" v-for="(reply, replyIndex) in review.replies" :key="replyIndex">
							<div class="reply-header">
								<div class="reply-user">{{ reply.user.name }}:</div>
								<div class="reply-date">{{ reply.date }}</div>
							</div>
							<div class="reply-content">{{ reply.content }}</div>
						</div>
					</div>
				</div>

				<!-- 没有评价时的提示 -->
				<div class="no-data" v-if="reviews.length === 0">
					<div>暂无评价，快来分享你的体验吧！</div>
				</div>
			</div>

			<!-- 发布评价按钮 -->
			<button class="btn-primary publish-review" @click="showReviewForm = true">
				发布评价
			</button>

			<!-- 评价表单模态框 -->
			<div v-if="showReviewForm" class="review-modal">
				<div class="modal-content">
					<h3>发布评价</h3>

					<!-- 评分选择 -->
					<div class="modal-rating">
						<div class="stars">
							<span v-for="i in 5" :key="i" :class="{ filled: i <= reviewForm.rating }"
								@click="reviewForm.rating = i">★</span>
						</div>
						<span class="rating-text">
							{{ reviewForm.rating }} 分
						</span>
					</div>

					<textarea v-model="reviewForm.content" placeholder="分享你的用餐体验..." class="modal-textarea"></textarea>

					<div class="modal-actions">
						<button class="btn-primary" @click="submitReview" :disabled="!reviewForm.content.trim()">
							提交评价
						</button>
						<button class="btn-secondary" @click="showReviewForm = false">
							取消
						</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 问答模块（保持不变） -->
		<div v-if="activeTab === 'qa'" class="content-container">
			<!-- 提问表单 -->
			<div class="ask-question">
				<h3>有关于美食的问题？来提问吧！</h3>
				<textarea v-model="questionText" placeholder="请输入你的问题...（例如：这道菜辣吗？分量够两个人吃吗？）" class="question-textarea"
					@keydown.enter.prevent="submitQuestion"></textarea>
				<button class="btn-primary" @click="submitQuestion">
					提交问题
				</button>
			</div>

			<!-- 问题列表 -->
			<div class="question-list">
				<div class="question-item" v-for="(question, index) in questions" :key="index">
					<div class="question-header">
						<div class="question-user">{{ question.user.name }}</div>
						<div class="question-date">{{ question.date }}</div>
					</div>
					<div class="question-content">{{ question.question }}</div>

					<!-- 回答状态 -->
					<div class="answer-status" :class="{ answered: question.answers && question.answers.length > 0 }">
						<span v-if="question.answers && question.answers.length > 0">
							已有 {{ question.answers.length }} 个回答
						</span>
						<span v-else>等待回答</span>
					</div>

					<!-- 回答列表 -->
					<div class="answers" v-if="question.answers && question.answers.length > 0">
						<div class="answer-item" v-for="(answer, answerIndex) in question.answers" :key="answerIndex">
							<div class="answer-header">
								<div class="answer-user">{{ answer.user.name }}</div>
								<div class="answer-date">{{ answer.date }}</div>
								<div class="answer-tag" v-if="answer.isMerchantAnswer">商家回答</div>
							</div>
							<div class="answer-content">{{ answer.answer }}</div>
						</div>
					</div>

					<!-- 回答按钮 -->
					<button class="btn-secondary answer-btn" @click="toggleAnswerForm(question.id)"
						:disabled="!question.answers || question.answers.length === 0 && !showingAnswerForm[question.id]">
						{{
              question.answers && question.answers.length > 0
                ? showingAnswerForm[question.id]
                  ? '收起回答回复'
                  : '用户回复'
                : '我来回答'
            }}
					</button>
					<!-- 回答表单 -->
					<transition-group name="answer-form-fade" class="answer-form" tag="div"
						v-if="showingAnswerForm[question.id]">
						<div key="answer-form" class="answer-form-inner">
							<textarea v-model="answerText[question.id]" placeholder="写下你的回答..." class="answer-textarea"
								@keydown.enter.prevent="submitAnswer(question.id)"></textarea>
							<div class="form-actions">
								<button class="btn-primary" @click="submitAnswer(question.id)">
									提交回答
								</button>
								<button class="btn-secondary" @click="hideAnswerForm(question.id)">
									取消
								</button>
							</div>
						</div>
					</transition-group>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref
	} from 'vue';
	import {
		reviewData
	} from '@/api/review.js';

	// 初始化响应式数据（修改了reviews的初始化逻辑）
	const state = reactive({
		activeTab: reviewData.data.activeTab,
		reviews: reviewData.data.reviews.map(review => ({
			...review,
			isFavorited: false, // 新增收藏状态字段
			// 可根据需求保留或移除likes字段
			// likes: review.likes
		})),
		questions: reviewData.data.questions,
		showingReplyForm: {},
		showingAnswerForm: {},
		replyText: {},
		answerText: {},
		questionText: '',
		showReviewForm: false,
		reviewForm: {
			content: '',
			rating: 5 // 默认评分
		}
	});

	// 解构响应式数据
	const {
		activeTab,
		reviews,
		questions,
		showingReplyForm,
		showingAnswerForm,
		replyText,
		answerText,
		questionText,
		showReviewForm,
		reviewForm,
	} = toRefs(state);

	// 标签页切换方法
	const switchTab = (tabName) => {
		state.activeTab = tabName;
	};

	// 切换点赞状态功能
	const toggleFavorite = (reviewId) => {
		const review = state.reviews.find((r) => r.id === reviewId);
		if (review) {
			// 切换状态
			review.isFavorited = !review.isFavorited;

			// 可添加状态切换时的提示（如使用Toast通知）
			const statusText = review.isFavorited ? '点赞成功' : '已取消点赞';
			console.log(statusText);
			// 这里可以集成通知组件，例如：
			// notify({ message: statusText, type: 'success' });
		}
	};

	// 评价功能 - 显示回复表单
	const showReplyForm = (reviewId) => {
		state.showingReplyForm[reviewId] = true;
		state.replyText[reviewId] = '';
	};

	// 评价功能 - 隐藏回复表单
	const hideReplyForm = (reviewId) => {
		state.showingReplyForm[reviewId] = false;
		state.replyText[reviewId] = '';
	};

	// 评价功能 - 提交回复
	const submitReply = (reviewId) => {
		const replyContent = state.replyText[reviewId];
		if (!replyContent.trim()) return;

		const review = state.reviews.find((r) => r.id === reviewId);
		if (review) {
			review.replies = review.replies || [];
			review.replies.push({
				user: {
					name: '用户'
				},
				date: new Date().toLocaleDateString(),
				content: replyContent,
			});
			hideReplyForm(reviewId);
		}
	};

	// 评价功能 - 提交评价
	const submitReview = () => {
		if (!reviewForm.value.content.trim()) return;

		state.reviews.unshift({
			id: state.reviews.length + 1,
			user: {
				name: '用户' // 假设用户提交评价
			},
			date: new Date().toLocaleDateString(),
			content: reviewForm.value.content,
			rating: reviewForm.value.rating,
			isFavorited: false, // 新提交的评价默认未收藏
			replies: []
		});

		// 重置表单并关闭模态框
		reviewForm.value.content = '';
		reviewForm.value.rating = 5;
		state.showReviewForm = false;
	};

	// 问答功能 - 提交问题
	const submitQuestion = () => {
		const questionContent = state.questionText.trim();
		if (!questionContent) return;

		state.questions.unshift({
			id: state.questions.length + 1,
			user: {
				name: '用户' // 假设用户提交问题
			},
			date: new Date().toLocaleDateString(),
			question: questionContent,
			answers: [],
		});
		state.questionText = '';
	};

	// 问答功能 - 切换回答表单
	const toggleAnswerForm = (questionId) => {
		state.showingAnswerForm[questionId] = !state.showingAnswerForm[questionId];
		if (state.showingAnswerForm[questionId]) {
			state.answerText[questionId] = '';
		}
	};

	// 问答功能 - 隐藏回答表单
	const hideAnswerForm = (questionId) => {
		state.showingAnswerForm[questionId] = false;
		state.answerText[questionId] = '';
	};

	// 问答功能 - 提交回答
	const submitAnswer = (questionId) => {
		const answerContent = state.answerText[questionId].trim();
		if (!answerContent) return;

		const question = state.questions.find((q) => q.id === questionId);
		if (question) {
			question.answers = question.answers || [];
			question.answers.push({
				user: {
					name: '用户'
				},
				date: new Date().toLocaleDateString(),
				answer: answerContent,
				isMerchantAnswer: false,
			});
			hideAnswerForm(questionId);
		}
	};
</script>

<style scoped>
	.review-qa-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
			'Helvetica Neue', sans-serif;
		color: #333;
	}

	.tab-container {
		display: flex;
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;
	}

	.tab-item {
		padding: 10px 20px;
		cursor: pointer;
		margin-right: 10px;
		border-bottom: 2px solid transparent;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		border-bottom-color: #007bff;
		color: #007bff;
	}

	.content-container {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
	}

	.review-list,
	.question-list {
		margin-top: 15px;
	}

	.review-item,
	.question-item {
		border-bottom: 1px solid #eee;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.review-header,
	.question-header,
	.reply-header,
	.answer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.user-name,
	.question-user,
	.reply-user,
	.answer-user {
		font-weight: 500;
	}

	.review-date,
	.question-date,
	.reply-date,
	.answer-date {
		font-size: 12px;
		color: #999;
	}

	.review-rating {
		margin: 8px 0;
		display: flex;
		align-items: center;
	}

	.stars {
		display: flex;
		margin-right: 10px;
	}

	.stars span {
		color: #ffc107;
		cursor: pointer;
		transition: color 0.2s;
	}

	.stars span.filled {
		color: #ff9800;
	}

	.rating-text {
		font-size: 14px;
		color: #666;
	}

	.review-content,
	.question-content,
	.reply-content,
	.answer-content {
		line-height: 1.6;
		margin-bottom: 10px;
	}

	.review-actions {
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
	}

	.action-btn {
		background: none;
		border: none;
		color: #007bff;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 4px;
		transition: background-color 0.3s ease;
	}

	.action-btn:hover {
		background-color: #f0f8ff;
	}

	.reply-form,
	.answer-form {
		margin-top: 10px;
	}

	.reply-form-inner,
	.answer-form-inner {
		background-color: #f9f9f9;
		padding: 15px;
		border-radius: 6px;
		animation: fadeIn 0.3s ease;
	}

	.reply-textarea,
	.answer-textarea,
	.question-textarea,
	.modal-textarea {
		width: 100%;
		min-height: 80px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		resize: vertical;
		margin-bottom: 10px;
		font-family: inherit;
		font-size: 14px;
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.btn-primary {
		background-color: #007bff;
		color: #fff;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.btn-primary:hover {
		background-color: #0056b3;
	}

	.btn-secondary {
		background-color: #f1f1f1;
		color: #333;
		border: 1px solid #ddd;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-secondary:hover {
		background-color: #e5e5e5;
	}

	.replies,
	.answers {
		margin-top: 10px;
		padding-left: 15px;
		border-left: 2px solid #eee;
	}

	.reply-item,
	.answer-item {
		margin-bottom: 10px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f5f5f5;
	}

	.answer-tag {
		background-color: #007bff;
		color: #fff;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 4px;
		margin-left: 5px;
	}

	.answer-status {
		font-size: 12px;
		color: #666;
		margin-bottom: 8px;
	}

	.answer-status.answered {
		color: #28a745;
	}

	.publish-review {
		margin-top: 20px;
	}

	/* 评价表单模态框 */
	.review-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		width: 400px;
		max-width: 90%;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	}

	.modal-rating {
		margin: 15px 0;
	}

	.modal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 15px;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.no-data {
		text-align: center;
		padding: 20px;
		color: #999;
		font-style: italic;
	}

	/* 可添加状态切换时的视觉反馈样式 */
	.action-btn.favorited {
		color: #ff9800;
		/* 收藏状态的颜色 */
	}
</style>